<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding:0;
			}
			#container {
				margin:20px 50px
			}
			#fruits>li {
				list-style: none;
				width:200px;
				height: 50px;
				font-size: 20px;
				line-height: 50px;
				background-color: cadetblue;
				color: white;
				text-align: center;
				margin: 2px 0;
			}
			#fruits>li>a {
				float: right;
				text-decoration: none;
				color: white;
				position: relative;
				right: 5px;
			}
			#fruits~input {
				border: none;
				outline: none;
				font-size: 18px;
			}
			#fruits~input[type=text] {
				border-bottom: 1px solid darkgray;
				width: 200px;
				height: 50px;
				text-align: center;
			}
			#fruits~input[type=button] {
				width: 80px;
				height: 30px;
				background-color: coral;
				color: white;
				vertical-align: bottom;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<ul id="fruits">
				<li>苹果<a href="">x</a></li>
				<li>香蕉<a href="">x</a></li>
				<li>火龙果<a href="">x</a></li>
				<li>西瓜<a href="">x</a></li>
			</ul>
			<input type="text" name="fruit" />
			<input id="ok" type="button" value="确定" />
		</div>
		<script>
			// 把添加到列表封装到函数中
			function addListItem() {
				// trim()去除字符串两边的空白
				let name = input.value.trim()
				if (name.length > 0) {
					//创建标签
					let li = document.createElement('li')
					li.textContent = name
					// 通过父标签的appendChild方法可以将子标签加到父标签中
					//ul.appendChild(li)
					// 通过父标签的insertBefore方法可以将子标签加到指定的位置
					ul.insertBefore(li,ul.firstChild)
					// 输入完后，把input中的文本清空
					input.value = ''
					// 重新获得焦点,标签的focus方法可以让标签获得焦点
					input.focus()
				}
			}
			
			//获取所有a标签
			// 获得一个列表，算是伪数组,可以使用forEach
			var anchors = document.querySelectorAll('#fruits>li>a')
			// 获取ul标签
			const ul = document.querySelector('#fruits')
			const input = document.querySelector('#fruits+input')
			// 输入完水果名后，按enter后添加完成一个水果列表
			input.addEventListener('keypress',(evt) => {
				// ascll码 13为Enter，判断按键是否为Enter
				// 不同浏览器按键属性不同，用短路运算解决浏览器兼容问题
				let code = evt.keyCode || evt.which
				if (code == 13) {
					addListItem()
				}
			})
			const ok = document.querySelector('#ok')
			
			// 删3.for语句
			for(let i = 0;i < anchors.length;i++) {
				anchors[i].addEventListener('click',(evt) =>{
					// 事件对象的preventDefault方法可以阻止事件的默认行为
					evt.preventDefault()
					// 通过父标签的appendChild方法可以将子标签加到父标签中
					ul.removeChild(anchors[i].parentNode)
				})
			}
			
			ok.addEventListener('click',() => {
				addListItem()
			})
		</script>
	</body>
</html>
